<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>属性和方法</title>
    </head>
    <div>

        <!--在 #first 元素内部书写根组件的模板(template)-->
        <div id="first">
            <div>
                <b>{{ this.firstName }}</b>
                <span>{{ this.lastName }}</span>
                <p>{{ this.fullName() }}</p>
            </div>
        </div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            const options = {
                data() {
                    return {
                        firstName: '李',
                        lastName: '小芳'
                    }
                },
                methods: {
                    fullName() {
                        console.log( '当前组件: ', this );
                        return this.firstName + this.lastName;
                    }
                },
                mounted() {
                    console.log( '当前组件: ', this );
                    console.log( '根组件: ', this.$root );
                }
            }

            // 解构赋值
            const { createApp } = Vue;

            // 创建应用
            const app = createApp( options );
            // 挂载应用
            app.mount( '#first' );
        </script>
    </div>
</html>